<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="./static/css/app.css">
</head>
<body class="F6">
<div id="app" class="index-page">
    <!-- 头部 -->
    <div class="header-box">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="user-box">
            <div class="avatar">
                <img src="./static/images/avatar.png" alt="">
            </div>
            <div class="nickname-box">
                <div class="nickname ellipsis-1">薛定谔的猫</div>
                <div class="tag-name">一级达人</div>
            </div>
        </div>
        <div class="erji">
            <img src="./static/images/erji.png" alt="">
        </div>
        <div class="banner">
            <div class="carousel-container" id="carousel1">
                <div class="carousel-wrapper">
                    <a href="#" class="carousel-item">
                        <img src="./static/images/banner.png" alt="">
                    </a>
                    <a href="#" class="carousel-item">
                        <img src="./static/images/banner.png" alt="">
                    </a>
                    <a href="#" class="carousel-item">
                        <img src="./static/images/banner.png" alt="">
                    </a>
                </div>
                <div class="carousel-dots"></div>
            </div>
        </div>
        <div class="notice-box">
            <div class="notice-label">通知<span>消息</span></div>
            <div class="notice-text ellipsis-1">黑白灰用户通过分享赚得3530元！</div>
        </div>
    </div>
    <!-- 积分商城 & 每日推荐 -->
    <div class="two-box">
        <div class="left">
            <div class="top">
                <div class="title">积分商城</div>
                <a href="#" class="more">查看更多 <img src="./static/images/right.png" alt=""></a>
            </div>
            <div class="carousel-container" id="carousel2">
                <div class="carousel-wrapper">
                    <a href="#" class="carousel-item">
                        <div class="jian"><img src="./static/images/jian.png" alt=""><span>荐</span></div>
                        <div class="product-image"><img src="./static/images/product.png" alt=""></div>
                    </a>
                    <a href="#" class="carousel-item">
                        <div class="jian"><img src="./static/images/jian.png" alt=""><span>荐</span></div>
                        <div class="product-image"><img src="./static/images/product.png" alt=""></div>
                    </a>
                    <a href="#" class="carousel-item">
                        <div class="jian"><img src="./static/images/jian.png" alt=""><span>荐</span></div>
                        <div class="product-image"><img src="./static/images/product.png" alt=""></div>
                    </a>
                </div>
                <div class="carousel-dots"></div>
            </div>
            <div class="product-title ellipsis-1">头戴式耳机撞色潮流潮流潮流潮流</div>
            <div class="point-box">
                <img src="./static/images/point.png" alt="">
                <span>3000</span>
            </div>
        </div>
        <div class="right">
            <div class="top">
                <div class="title">每日推荐</div>
                <a href="#" class="more">查看更多 <img src="./static/images/right.png" alt=""></a>
            </div>
            <div class="product-list">
                <a href="#" class="item">
                    <div class="product-image"><img src="./static/images/product2.png" alt=""></div>
                    <div class="product-title ellipsis-1">加湿器</div>
                </a>
                <a href="#" class="item">
                    <div class="product-image"><img src="./static/images/product2.png" alt=""></div>
                    <div class="product-title ellipsis-1">加湿器</div>
                </a>
                <a href="#" class="item">
                    <div class="product-image"><img src="./static/images/product2.png" alt=""></div>
                    <div class="product-title ellipsis-1">加湿器</div>
                </a>
                <a href="#" class="item">
                    <div class="product-image"><img src="./static/images/product2.png" alt=""></div>
                    <div class="product-title ellipsis-1">加湿器</div>
                </a>
            </div>
        </div>
    </div>
    <!-- 视频号学院 -->
    <div class="video-box">
        <div class="bg">
            <img src="./static/images/video-bg1.png" alt="">
        </div>
        <div class="content">
            <div class="top">
                <div class="title">视频号学院</div>
                <div class="more-box">
                    <div class="point"></div>
                    <div class="text">更多</div>
                </div>
            </div>
            <div class="article-list">
                <a href="#" class="article-item">
                    <div class="left">
                        <div class="title ellipsis-2">文章标题文章标题文章标题文章标题</div>
                        <div class="bottom">
                            <div class="time-box">
                                <img src="./static/images/time.png" alt="">
                                <span>2023-04-05</span>
                            </div>
                            <div class="right-text">资料分类</div>
                        </div>
                    </div>
                    <div class="right"><img src="./static/images/article.png" alt=""></div>
                </a>
                <a href="#" class="article-item">
                    <div class="left">
                        <div class="title ellipsis-2">文章标题文章标题文章标题文章标题</div>
                        <div class="bottom">
                            <div class="time-box">
                                <img src="./static/images/time.png" alt="">
                                <span>2023-04-05</span>
                            </div>
                            <div class="right-text">资料分类</div>
                        </div>
                    </div>
                    <div class="right"><img src="./static/images/article.png" alt=""></div>
                </a>
            </div>
        </div>
    </div>
    <!-- 精选推荐 -->
    <div class="recommend-box">
        <div class="title">
            <div class="left"></div>
            <div class="middle">精选推荐</div>
            <div class="right"></div>
        </div>
        <div class="list">
            <div class="item">
                <div class="product-image">
                    <img src="./static/images/product3.png" alt="">
                </div>
                <div class="product-title ellipsis-1">XX会员俱乐部卷纸</div>
                <div class="bottom">
                    <div class="point-box">
                        <img src="./static/images/point.png" alt="">
                        <span>3000</span>
                    </div>
                    <a href="#" class="btn">立即兑换</a>
                </div>
            </div>
            <div class="item">
                <div class="product-image">
                    <img src="./static/images/product3.png" alt="">
                </div>
                <div class="product-title ellipsis-1">XX会员俱乐部卷纸</div>
                <div class="bottom">
                    <div class="point-box">
                        <img src="./static/images/point.png" alt="">
                        <span>3000</span>
                    </div>
                    <a href="#" class="btn">立即兑换</a>
                </div>
            </div>
            <div class="item">
                <div class="product-image">
                    <img src="./static/images/product3.png" alt="">
                </div>
                <div class="product-title ellipsis-1">XX会员俱乐部卷纸</div>
                <div class="bottom">
                    <div class="point-box">
                        <img src="./static/images/point.png" alt="">
                        <span>3000</span>
                    </div>
                    <a href="#" class="btn">立即兑换</a>
                </div>
            </div>
            <div class="item">
                <div class="product-image">
                    <img src="./static/images/product3.png" alt="">
                </div>
                <div class="product-title ellipsis-1">XX会员俱乐部卷纸</div>
                <div class="bottom">
                    <div class="point-box">
                        <img src="./static/images/point.png" alt="">
                        <span>3000</span>
                    </div>
                    <a href="#" class="btn">立即兑换</a>
                </div>
            </div>
        </div>
    </div>
    <!-- 底部 tabBar -->
    <div class="tab-bar-wrap">
        <div class="bar-height"></div>
        <div class="tab-bar">
            <div class="item active">
                <div class="icon">
                    <img src="./static/images/tabbar-icon-1.png" alt="">
                    <img src="./static/images/tabbar-icon-1-select.png" alt="">
                </div>
                <div class="title">首页</div>
            </div>
            <div class="item">
                <div class="icon">
                    <img src="./static/images/tabbar-icon-2.png" alt="">
                    <img src="./static/images/tabbar-icon-2-select.png" alt="">
                </div>
                <div class="title">商城</div>
            </div>
            <div class="item">
                <div class="icon">
                    <img src="./static/images/tabbar-icon-3.png" alt="">
                    <img src="./static/images/tabbar-icon-3-select.png" alt="">
                </div>
                <div class="title">分享</div>
            </div>
            <div class="item">
                <div class="icon">
                    <img src="./static/images/tabbar-icon-4.png" alt="">
                    <img src="./static/images/tabbar-icon-4-select.png" alt="">
                </div>
                <div class="title">我的</div>
            </div>
        </div>
    </div>
    
</div>
<script src="./static/js/common.js"></script>
<script>
      new Carousel('carousel1', 3000);
      new Carousel('carousel2', 4000);
</script>
</body>
</html>